<template>
    <div class="table">
        <!-- title -->
         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>项目列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格主体 -->
        <div class="container">
            <!-- title -->
            <div class="handle-box">
                <div class="handle-box-1">
                    <span style="width:80px;text-align :right;display:inline-block;">项目ID：</span>
                    <el-input type="number" v-model="id" placeholder="请输入项目ID"  class="handle-input"></el-input>
                    <span style="width:80px;text-align :right;display:inline-block;">项目名称：</span>
                    <el-input v-model="name" placeholder="请输入项目名称" class="handle-input"></el-input>
                </div>
                <div class="handle-box-1">
                    <span style="width:80px;text-align :right;display:inline-block;">起始日期：</span>
                    <el-date-picker value-format="yyyy-MM-dd" v-model="startDate" type="date" class="handle-date" placeholder="选择日期" style="width:250px;">
                    </el-date-picker>
                    <span style="width:80px;text-align :right;display:inline-block;">终止日期：</span>
                    <el-date-picker value-format="yyyy-MM-dd" v-model="endDate"  type="date" class="handle-date" placeholder="选择日期" style="width:250px;"></el-date-picker>
                    <span style="width:80px;text-align :right;display:inline-block;">项目类型：</span>
                    <el-select v-model="value" placeholder="请选择" class="handle-select"  @change="getTypeValue" >
                        <el-option v-for="item in options" :key="item.value"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <span style="width:20px;text-align :right;display:inline-block;"></span>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
            </div>
            <!-- 表格主体 -->
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column prop="id" label="项目ID" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="项目标题"  align="center"></el-table-column>
                <el-table-column prop="create_time" label="发布时间" width="200" align="center"></el-table-column>
                <el-table-column prop="is_collageText" label="类型" width="100" align="center"></el-table-column>
                <el-table-column prop="price" label="项目优惠价" width="120" align="center"></el-table-column>
                <el-table-column label="项目原价" width="120" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.original_price}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center" width="220">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleLook(scope.$index, scope.row)">查看详情</el-button>
                        <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button class="del" size="small" type="text" @click="handleDelete(scope.$index, scope.row)">下架</el-button>
                        <el-button class="download" size="small" type="text"  @click="handleDownload(scope.$index, scope.row)">下载小程序码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页按钮 -->
            <div class="pagination" v-show="totalPages>1">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                </el-pagination>
            </div>
            <!-- 下架提示框 -->
            <el-dialog title="提示" :visible.sync="delVisible" width="400px" center >
                <div class="del-dialog-cnt">下架不可恢复，是否确定下架？</div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>    
</template>
<script>
export default {
    name:"project" ,
    data(){
        return{
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalElements:1,//默认的总条数
            totalPages:1,//默认的总页数
            tableData:[],//表格数据
            delVisible:false, //下架确认提示，默认隐藏
            type:0,//加载的类型，默认0，不限制（1拼团2普通)
            id:'',//项目id
            name:'',//项目名称
            startDate:'',//开始日期
            endDate:'',//截止日期
            options:[
                // {value:"0",label:'请选择',disabled: true},
                {value:"2",label:'普通'},
                {value:"1",label:'拼团'},
            ],
            value:''
        }
    },
    mounted(){
        this.getProjectData();
    },
    methods:{
        //获取data数据
        getProjectData(){
            // console.log(this.pageSize);
            const querystring = require('querystring');

            const param ={

                id:this.id,
                name: this.name,
                type : this.type,
                startDate: this.startDate,
                endDate: this.endDate,
                pageIndex :this.pageIndex,
                pageSize :this.pageSize,
                
            }
            
            this.$axios
                .post('/manage/item/list',querystring.stringify(param))
                .then(response=>{
                    // console.log(response);
                    if(response.data.code==200){

                        this.totalPages = response.data.data.totalPages;
                        this.pageSize = response.data.data.pageSize;
                        this.totalElements = response.data.data.totalElements;
                        // console.log(this.totalPages);
                        // console.log(this.pageSize);
                        let data =  response.data.data.currData;
                        let obj = data ;
                        for(let i=0 ; i<data.length ;i++){
                            //console.log(data[i]);

                            if(data[i].is_collage == 0){
                                obj[i].is_collageText = "普通";//普通项目取原价
                                obj[i].price = data[i].price;
                            }else{
                                obj[i].is_collageText = "拼团";//拼团项目取团购价
                                obj[i].price = data[i].collage_price;
                            }
                        }
                        // console.log(obj)
                        this.tableData = obj;//赋值 table 列表数据   
                    }else{
                        console.log(response.data.msg)  
                    }
                })
                .catch(error=>{
                    console.log(error); 
                });
        },
        //筛选项目类型
        getTypeValue(){
            //console.log(this.value);
            if(this.value == 1){
                this.type = 1;
            }else if(this.value == 2){
                this.type = 2;
            }else{
                this.type = 0
            }
        },
        //查看项目详情
        handleLook(index,row){

             if(row.id &&row.id>0){
                    this.$router.push({path:"/project/detail/"+row.id});
                }else{
                    this.$message.error('获取用户ID失败:'+id);
                }
        },
        //编辑项目详情
        handleEdit(index,row){
            if(row.id &&row.id>0){
                this.$router.push({path:"/project/edit/"+row.id});
            }else{
                this.$message.error('获取用户ID失败:'+id);
            }
        },
        //下架项目
        handleDelete (index,row){
            if(row.id && row.id>0){
                this.delVisible = true;
                this.delIndex = index;//当前要删除的下标
                this.delId = row.id;// 当前选中ID
            }
        },
        //执行下架
        deleteRow (){
            //console.log("触发了确定");
            if(this.delId>0){
                const querystring = require('querystring');
                const param ={
                    id:this.delId
                }
                this.$axios.post('/manage/item/delete',querystring.stringify(param)).then(response=>{
                    //console.log(response);
                    if(response.data.code==200){
                        this.tableData.splice(this.delIndex, 1);
                        this.$message.success('下架成功');
                        this.delVisible = false;
                    }else{
                        this.$notify.error({
                            title: '下架失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                    console.log(error); 
                });
            }
        },
         // 分页导航
        handleCurrentChange (val){
            // console.log(val);
            this.pageIndex = val;
            this.getProjectData();
        },
         //查询
        search (){
            this.pageIndex = 1;
            this.pageSize = 10;
            this.getProjectData();
        },
        //重置
        reset(){
            this.id = '';
            this.name = '';
            this.type = 0 ;
            this.value = '' ;
            this.startDate = '';
            this.endDate = ''
        },
        //跳转下载小程序二维码
        handleDownload(index,row){
            if(row.id&&row.id>0){
                window.open("http://api.xfkka.com/manage/qrcode/download/item?itemId="+row.id+"&itemType="+row.is_collage);   
            }
        }
    }  
}
</script>
<style lang="stylus" scoped>
    .handle-box{
        margin-bottom :20px;
        .handle-box-1{
            margin-bottom :15px;
            .handle-input {
                width: 250px;
                display: inline-block;
                margin-right :20px;
            }
            .handle-date{
                margin-right :20px;
                
            }
        }
        .handle-box-2{
            .handle-select{
                width :135px;
                margin-right :20px;
            }
        }
       
    }
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
</style>
